<template>
    <div>
        <el-button @click="openDialog">打开弹窗</el-button>
        <el-dialog :visible.sync="dialogVisible" title="弹窗标题" width="80%">
            <child-component
                v-if="dialogVisible"
                :chartWidth="chartWidth"
                :chartHeight="chartHeight"
            ></child-component>
        </el-dialog>
    </div>
</template>
<script>
import { Dialog } from "element-ui";

export default {
    components: {
        "el-dialog": Dialog,
    },
    data() {
        return {
            dialogVisible: false,
            chartWidth: 0,
            chartHeight: 0,
        };
    },
    methods: {
        openDialog() {
            this.dialogVisible = true;
        },
    },
    watch: {
        dialogVisible(newVal) {
            if (newVal) {
                this.$nextTick(() => {
                    const dialogContent =
                        this.$refs.dialog.$el.querySelector(".el-dialog__body");
                    this.chartWidth = dialogContent.offsetWidth;
                    this.chartHeight = dialogContent.offsetHeight;
                });
            }
        },
    },
};
</script>
